<script setup lang="ts">
  import { onMounted, ref } from "vue"
  import { useRound, useSum } from "@vueuse/math"
  // 鼠标位置
  // 防抖
  // 拖动
  // 颜色模式
  import { useColorMode, useDebounceFn, useDraggable, useMouse } from "@vueuse/core"
  // swiper
  import { Swiper, SwiperSlide } from "swiper/vue"
  import { Autoplay, Navigation, Pagination } from "swiper/modules"
  // Import Swiper styles
  import "swiper/css"
  import "swiper/css/navigation"
  import "swiper/css/pagination"

  onMounted(() => {
  })

  const { x, y } = useMouse()

  function ce() {
    console.log(useRound(useSum(0.2, 0.1), 2))
  }
  const fangdou = useDebounceFn(ce, 500)

  const el = ref<HTMLElement | null>(null)
  const DragData = useDraggable(el, {
    initialValue: { x: 140, y: 40 },
  })
  const x2 = ref(DragData.x)
  const y2 = ref(DragData.y)
  const style = ref(DragData.style)

  function changeColor() {
    const mode = useColorMode() // Ref<'dark' | 'light'>
    console.log(mode)
    mode.value = mode.value === "dark" ? "light" : "dark"
  }

  const modules = [ Navigation, Pagination, Autoplay ]

  // swiper的实例
  let sw1: any = null
  const onSwiper = (swiper) => {
    console.log(swiper)
    sw1 = swiper
  }
  const onSlideChange = (slide) => {
    console.log(slide)
  }
  const controlSwiper= () => {
    console.log(sw1)
    sw1.slideNext()
  }

  let selectList = ref(["3", "4"])
  const clickItem = (res: string) => {
    if (isSelected(res)) {
      // 如果项目已选中，则取消选中
      const selectedIndex = selectList.value.indexOf(res)
      selectList.value.splice(selectedIndex, 1)
    } else {
      // 如果项目未选中，则添加到选中列表中
      selectList.value.push(res)
    }
    console.log(selectList.value)
  }
  const isSelected = (res: string) => {
    return selectList.value.includes(res)
  }
</script>

<template>
  <div>
    <div>pos: {{x}}, {{y}}</div>
    <div>
      <el-button @click="fangdou">防抖</el-button>
    </div>
    <div class="drag" ref="el" :style="style">
      Drag me! I am at {{x2}}, {{y2}}
    </div>
    <div>
      <el-button @click="changeColor">changeColor</el-button>
    </div>
    <swiper class="mySwiper" ref="sw"
            :navigation="true"
            :pagination="{ clickable: true }"
            :autoplay="{ delay: 1000 }"
            :modules="modules"
            :loop="true"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
    <el-button @click="controlSwiper">控制轮播</el-button>
    <div class="selectItem" :class="{'active': isSelected('1')}" @click="clickItem('1')">1</div>
    <div class="selectItem" :class="{'active': isSelected('2')}" @click="clickItem('2')">2</div>
    <div class="selectItem" :class="{'active': isSelected('3')}" @click="clickItem('3')">3</div>
    <div class="selectItem" :class="{'active': isSelected('4')}" @click="clickItem('4')">4</div>
  </div>
</template>

<style scoped>
  .drag {
    position: fixed;
    border: 1px solid black;
    background-color: #eed111;
    cursor: move;
  }
  .mySwiper {
    width: 100%;
    height: 300px;
    background-color: #66ccee;
  }
  .selectItem {
    width: 100px;
    height: 100px;
    display: inline-block;
    border: 1px solid black;
  }
  .active {
    border-color: red;
  }

</style>